<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="container">
    <div class="top-box">
      <div class="left-box">
        <!-- 48小时告警 -->
        <div class="box-item doing">
          <div class="item-title-container">
            <span class="box-title">{{data.marks}}小时告警</span>
          </div>
          <div class="tab-cotnainer">
            <div class="tab-item">
              <span
                class="tab-value"
              >{{ data.realTimeWarning.people >99 ?'99+': data.realTimeWarning.people}}</span>
              <span class="tab-title">人员违规</span>
            </div>
            <div class="tab-item">
              <span
                class="tab-value"
              >{{ data.realTimeWarning.equipment > 99?'99+':data.realTimeWarning.equipment}}</span>
              <span class="tab-title">设备违规</span>
            </div>
            <div class="tab-item">
              <span
                class="tab-value"
              >{{ data.realTimeWarning.vehicle > 99?'99+':data.realTimeWarning.vehicle}}</span>
              <span class="tab-title">车辆违规</span>
            </div>
            <div class="tab-item">
              <span
                class="tab-value"
              >{{ data.realTimeWarning.boundary > 99 ?'99+' :data.realTimeWarning.boundary}}</span>
              <span class="tab-title">边界异常</span>
            </div>
          </div>
        </div>
        <div class="box-item flow-statistic">
          <div class="item-title-container">
            <span class="box-title">{{data.marks}}小时流量</span>
          </div>

          <div class="item-vehicle">
            <div class="tab-item">
              <img class="tab-icon" src="../../assets/png/车辆.png" />
              <span class="tab-title">车辆</span>
            </div>
            <div class="tab-item" style="margin-left:32px;">
              <span class="tab-value">{{ data.flow_vehicle }}</span>
            </div>
            <div
              class="tab-item"
              style="flex:1;display: flex; justify-content: flex-end;flex-direction: row;"
            >
              <!-- <img src="../../assets/png/icon-upward.png" alt srcset />
              <span class="upward">上升15.8%</span>-->
            </div>
          </div>
          <div class="item-person">
            <div class="tab-item">
              <img class="tab-icon" src="../../assets/png/人员.png" />
              <span class="tab-title">人员</span>
            </div>
            <div class="tab-item" style="margin-left:32px;">
              <span class="tab-value">{{ data.flow_people}}</span>
            </div>
            <div
              class="tab-item"
              style="flex:1; display: flex; justify-content: flex-end;flex-direction: row;"
            >
              <!-- <img src="../../assets/png/icon-fall.png" alt srcset />
              <span class="fall">下降15.8%</span>-->
            </div>
          </div>
        </div>

        <div class="box-item real-time">
          <div class="item-title-container">
            <span class="box-title">{{data.marks}}小时前五告警摄像头</span>
          </div>
          <div class="video-container" ref="pieContainer"></div>
          <div class="total-list">
            <div class="total-item" v-for="(item,index) in data.totalWarningList" :key="index">
              <span :class="['circle', `type-${index+1}`]"></span>
              <span class="camera-name">{{item.name}}</span>
              <span class="total-num">{{item.value}}个</span>
            </div>
          </div>
        </div>
      </div>

      <div class="map-container">
        <Map :data="data.warningList" />
        <div class="time-range-cintainer">
          <div class="icon-group">
            <el-tooltip class="box-item" effect="dark" content="全部">
              <svg
                class="icon-image"
                @click="handleChnage(0)"
                width="16px"
                height="16px"
                viewBox="0 0 16 16"
              >
                <g id="全部" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g
                    id="navigation-menu-4"
                    :fill="data.currtype === 0?'#1890FF':'#C9CDD4'"
                    fill-rule="nonzero"
                  >
                    <path
                      d="M14.6666667,0 L1.33333333,0 C0.596953667,0 0,0.596953667 0,1.33333333 L0,14.6666667 C0,15.4030463 0.596953667,16 1.33333333,16 L14.6666667,16 C15.4030463,16 16,15.4030463 16,14.6666667 L16,1.33333333 C16,0.596953667 15.4030463,0 14.6666667,0 Z M11.6666667,11.3333333 L4.33333333,11.3333333 C3.9651435,11.3333333 3.66666667,11.0348565 3.66666667,10.6666667 C3.66666667,10.2984768 3.9651435,10 4.33333333,10 L11.6666667,10 C12.0348565,10 12.3333333,10.2984768 12.3333333,10.6666667 C12.3333333,11.0348565 12.0348565,11.3333333 11.6666667,11.3333333 Z M11.6666667,8.66666667 L4.33333333,8.66666667 C3.9651435,8.66666667 3.66666667,8.36818983 3.66666667,8 C3.66666667,7.63181017 3.9651435,7.33333333 4.33333333,7.33333333 L11.6666667,7.33333333 C12.0348565,7.33333333 12.3333333,7.63181017 12.3333333,8 C12.3333333,8.36818983 12.0348565,8.66666667 11.6666667,8.66666667 Z M11.6666667,6 L4.33333333,6 C3.9651435,6 3.66666667,5.70152317 3.66666667,5.33333333 C3.66666667,4.9651435 3.9651435,4.66666667 4.33333333,4.66666667 L11.6666667,4.66666667 C12.0348565,4.66666667 12.3333333,4.9651435 12.3333333,5.33333333 C12.3333333,5.70152317 12.0348565,6 11.6666667,6 Z"
                      id="形状"
                    />
                  </g>
                </g>
              </svg>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="车辆">
              <svg
                class="icon-image"
                @click="handleChnage(1)"
                width="16px"
                height="16px"
                viewBox="0 0 16 16"
              >
                <g id="车辆" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g
                    id="编组-11"
                    transform="translate(0, 0)"
                    :fill="data.currtype === 1?'#1890FF':'#C9CDD4'"
                    fill-rule="nonzero"
                  >
                    <g id="shipment-truck">
                      <path
                        d="M7.00000007,0.340922059 L0.333333401,0.340922059 C0.149238486,0.340922059 7.01221552e-08,0.493552123 7.01221552e-08,0.681830848 L7.01221552e-08,8.522733 C7.01221552e-08,8.71101173 0.149238486,8.86364179 0.333333401,8.86364179 L7.66666669,8.86364179 C7.8507616,8.86364179 8.00000007,8.71101173 8.00000007,8.522733 L8.00000007,1.15501225 C7.94285443,0.648250089 7.49569495,0.284221939 7.00000007,0.340922059 Z M6.00000004,2.72728358 L6.00000004,6.47728027 C6.00000004,6.75969835 5.77614241,6.98864345 5.50000004,6.98864345 C5.22385766,6.98864345 5.00000004,6.75969835 5.00000004,6.47728027 L5.00000004,2.72728358 C5.00000004,2.4448655 5.22385766,2.2159204 5.50000004,2.2159204 C5.77614241,2.2159204 6.00000004,2.4448655 6.00000004,2.72728358 Z M3.00000006,2.72728358 L3.00000006,6.47728027 C3.00000006,6.75969835 2.77614243,6.98864345 2.50000006,6.98864345 C2.22385768,6.98864345 2.00000006,6.75969835 2.00000006,6.47728027 L2.00000006,2.72728358 C2.00000006,2.4448655 2.22385768,2.2159204 2.50000006,2.2159204 C2.77614243,2.2159204 3.00000006,2.4448655 3.00000006,2.72728358 Z"
                        id="形状"
                      />
                      <path
                        d="M7.66666669,9.88636816 L0.333333401,9.88636816 C0.149238486,9.88636816 0,10.0389982 0,10.2272769 L0,11.7770483 C0,11.8395476 0.0333369876,11.8970662 0.0870174687,11.9269343 C0.14069795,11.9568024 0.206056514,11.9542296 0.257333402,11.92023 C0.577058127,11.7057847 0.950986142,11.5913413 1.3333334,11.5909121 C2.25791969,11.593781 3.06006542,12.2444431 3.27333338,13.1645471 C3.29143809,13.2411147 3.35830978,13.2951524 3.43533338,13.2954561 L3.89800005,13.2954561 C3.97510794,13.2953996 4.04211103,13.2412557 4.06000004,13.1645471 C4.24345171,12.3605459 4.88350337,11.7494546 5.68038001,11.6174845 C6.47725665,11.4855143 7.27316518,11.8587972 7.69533335,12.5625022 C7.73438982,12.6275063 7.81092576,12.6580495 7.88270835,12.6372779 C7.95449093,12.6165064 8.00400004,12.5494799 8.00400004,12.4731841 C8.00400004,12.0681844 8,11.3904577 8,10.2272769 C8,10.0389982 7.8507616,9.88636816 7.66666669,9.88636816 Z"
                        id="路径"
                      />
                      <path
                        d="M13.4806667,2.15592045 C13.4409348,2.14624178 13.4060612,2.12197905 13.3826667,2.0877387 L12.888,1.32955755 L12.888,1.32955755 C12.0193333,-0.0183958051 9.76066668,6.63122674e-06 9.66666668,6.63122674e-06 C9.29847684,6.63122674e-06 9.00000001,0.305273397 9.00000001,0.681830848 L9.00000001,12.9545473 C9.00000001,13.3311047 9.29847684,13.6363648 9.66666668,13.6363648 L9.84000001,13.6363648 C9.92706315,13.6363648 9.99938326,13.5676493 10.006,13.478865 C10.0846999,12.4119115 10.9541248,11.5872792 12.0003333,11.5872792 C13.0465419,11.5872792 13.9159667,12.4119115 13.9946666,13.478865 C14.0012834,13.5676493 14.0736035,13.6363648 14.1606666,13.6363648 L14.6666666,13.6363648 C15.4030463,13.6363648 16,13.0258446 16,12.2727297 L16,5.4545539 C15.9967591,3.895115 14.9592938,2.53673277 13.4806667,2.15592045 Z M14.6666613,5.4545539 L14.6666613,7.31864316 C14.666569,7.36397944 14.6488158,7.40740816 14.6173333,7.43932487 C14.5854845,7.47129064 14.5426234,7.48916756 14.498,7.48909776 L12.8313333,7.46659757 C12.7873069,7.46623736 12.7452238,7.44800428 12.7143425,7.41590969 C12.6834612,7.38381511 12.6663116,7.34048828 12.6666613,7.29546136 L12.6666613,3.58773737 C12.6666857,3.53983136 12.68626,3.49410877 12.7206667,3.46160112 C12.7555127,3.42937429 12.8018452,3.41333232 12.8486667,3.41728297 C13.878539,3.51353057 14.6668208,4.3968879 14.6666613,5.4545539 Z"
                        id="形状"
                      />
                      <ellipse
                        id="椭圆形"
                        cx="1.3333334"
                        cy="13.6363648"
                        rx="1.33333332"
                        ry="1.36363516"
                      />
                      <ellipse
                        id="椭圆形"
                        cx="6.00000003"
                        cy="13.6363648"
                        rx="1.33333332"
                        ry="1.36363516"
                      />
                      <ellipse id="椭圆形" cx="12" cy="13.6363648" rx="1.33333332" ry="1.36363516" />
                    </g>
                  </g>
                </g>
              </svg>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="人员">
              <svg
                class="icon-image"
                @click="handleChnage(2)"
                width="16px"
                height="16px"
                viewBox="0 0 16 16"
              >
                <g id="人员" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g
                    id="multiple-neutral-2"
                    transform="translate(0, 0)"
                    :fill="data.currtype === 2?'#1890FF':'#C9CDD4'"
                    fill-rule="nonzero"
                  >
                    <path
                      d="M13.2884519,10.7860822 L12.9125146,10.6432379 C12.8627243,10.5810098 12.8309849,10.5045512 12.8211965,10.4232577 C12.7593825,10.1153464 12.7726977,9.79555932 12.8598567,9.49476982 C13.5764872,8.66192286 13.9311758,7.54329695 13.8363606,6.41504704 C13.8973723,5.67130753 13.6587592,4.93509467 13.1806628,4.3919685 C12.7025665,3.84884232 12.030593,3.5506121 11.334111,3.57244577 C10.9629753,3.57338674 10.5961855,3.65807446 10.2576237,3.82099483 C10.1992881,3.84908127 10.160999,3.91034471 10.1589735,3.97883776 C10.1879464,5.35071247 9.79180432,6.69419903 9.03249458,7.79920816 C9.00115761,7.84337526 8.99058232,7.90056002 9.00383269,7.95419421 C9.04851801,8.13410588 9.10601026,8.31008194 9.17580403,8.4805754 C9.19387943,8.52495371 9.22806091,8.55951611 9.27045492,8.57628107 C10.8928512,9.21908035 13.0031661,10.2846987 13.0031661,13.5715457 L13.0031661,14.6428778 C13.0031993,14.6949633 12.9998585,14.7469884 12.9931678,14.7985781 C12.987244,14.8495783 13.0020328,14.9008499 13.0337793,14.9393749 C13.0655258,14.9778998 13.1111764,14.9999886 13.1591401,14.9999886 L15.6667222,14.9999886 C15.8507865,14.9999886 16,14.8401046 16,14.6428778 L16,14.033647 C16,11.8188463 14.5595734,11.2688958 13.2884519,10.7860822 Z"
                      id="路径"
                    />
                    <path
                      d="M12.0006666,13.5715457 C12.0006666,10.7517995 10.1523079,10.046863 8.5205799,9.42477612 L8.02799533,9.23479322 C7.98333611,9.21693769 7.91734711,9.13337378 7.86668889,8.94910465 C7.75560581,8.48937154 7.77439661,8.0046509 7.92067989,7.55637288 C8.55324113,6.81001149 9.17113814,5.8900943 9.17113814,3.60244307 C9.24773527,2.66051063 8.94528208,1.72835992 8.33986896,1.04049897 C7.73445584,0.352638018 6.88371239,-0.0254553285 6.00166639,0.00133865549 C5.11924065,-0.0255205185 4.26814247,0.352858851 3.66265844,1.0412097 C3.05717441,1.72956055 2.75499235,2.66229987 2.83219463,3.60458574 C2.83219463,5.8900943 3.45009165,6.81215415 4.07932011,7.55351599 C4.22809502,8.00292602 4.24759956,8.48983038 4.13531078,8.95124732 C4.08465256,9.13337378 4.01866356,9.21693769 3.97400433,9.23693589 C3.80603233,9.30335848 3.63606066,9.36835263 3.46608899,9.43263256 C1.84235961,10.0482914 0,10.7468 0,13.5751168 L0,14.6428778 C0,14.8401046 0.149213548,15 0.333277787,15 L11.6647225,15 C11.7535744,15.0007502 11.8390314,14.9634627 11.902111,14.8964087 C11.9651905,14.8293547 12.0006666,14.7380866 12.0006666,14.6428778 L12.0006666,13.5715457 Z"
                      id="路径"
                    />
                  </g>
                </g>
              </svg>
            </el-tooltip>
          </div>
          <div class="slider-wrapper">
            <div class="back-line">
              <div :class="['inside-line-1',`inside-line-${data.marks}`]"></div>
              <div :class="['circle-button',`circle-button-${data.marks}`]"></div>
            </div>
            <span class="time-24" @click="handleChangeTimeRange(24)">24小时</span>
            <span class="time-36" @click="handleChangeTimeRange(36)">36小时</span>
            <span class="time-72" @click="handleChangeTimeRange(72)">72小时</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-box">
      <div class="statistical-graph">
        <div class="statistical-header">
          <span class="statistical-title">{{data.marks}}小时告警</span>
        </div>
        <Statistical :data="data.warningList" />
      </div>
    </div>
  </div>
</template>

<script setup>
import Statistical from "./components/statistical.vue";
// import WarningList from "./components/WarningList.vue";
import Map from "./components/Map.vue";
import http from "../../api";
// import WS from "../../utils/websorket.js";
import { reactive, ref, onMounted, watch } from "vue";
import * as Echarts from "echarts";
import { pieOption } from "./components/_statistical.js";

// import dataJSon from "./data.json";
// const websorket = ref(null);
const pieContainer = ref(null);
const pieCharts = ref(null);

const data = reactive({
  currtype: 0, //1.全部。2. 人员 3. 车辆
  marks: 24,
  realdata: {},
  totalWarningList: [], //饼图统计前五个
  warningList: {}, //今日告警+昨日告警
  selectedCamera: "C1",
  detect_info_list: [], //实时告警

  camera: {},
  infrared: {},
  car: {},
  people: {},
  all_count: 0,
  processed: 0,
  untreated: 0,
  heatMapData: {},
  realTimeWarning: {
    people: 0,
    equipment: 0,
    vehicle: 0,
    boundary: 0
  },
  flow_vehicle: 0,
  flow_people: 0,

  cameraUrl:
    "http://183.6.88.43:8010/Safe/video_feed?camera_name=C1&width=308&height=231"
});

watch(
  () => data.selectedCamera,
  curr => {
    console.log(curr);
    data.cameraUrl = `http://183.6.88.43:8010/Safe/video_feed?camera_name=${curr.toUpperCase()}&width=308&height=231`;
  }
);

watch(
  () => data.marks,
  () => {
    getStatisticsInfo();
  }
);
const init = () => {
  pieCharts.value = new Echarts.init(pieContainer.value);
  pieCharts.value.setOption(pieOption);
};
const handleChangeTimeRange = param => {
  data.marks = param;
};
const handleChnage = e => {
  data.currtype = e;
};
const getStatisticsInfo = () => {
  http({
    name: "getStatistic",
    _url: `/Safe/get_alarm_${data.marks}h`
  })
    .then(res => {
      data.realTimeWarning.people =
        res.data.alarm_number["人员闯入"] +
        res.data.alarm_number["未穿反光衣"] +
        res.data.alarm_number["未戴安全帽"];

      // 五告警摄像头
      const arr = [];
      for (const key in res.data.alarm_sorted_dict) {
        const element = res.data.alarm_sorted_dict[key];
        arr.push({
          name: key,
          value: element
        });
      }
      data.totalWarningList = arr.sort((a, b) => a - b).slice(0, 5);
      const _option = JSON.parse(JSON.stringify(pieOption));
      _option.series[0].data = arr.sort((a, b) => a - b).slice(0, 5);
      pieCharts.value.setOption(_option);

      // 统计数据
      data.warningList = arr;
    })
    .catch(err => {
      console.log(err);
    });
};

onMounted(() => {
  // console.log(dataJSon);
  init();
  getStatisticsInfo();
});
</script>

<style lang="less" scoped>
.container {
  flex: 1;
  padding: 24px;
  background: rgba(0, 16, 61, 1);
  position: relative;
  display: flex;
  flex-direction: column;

  .box-item {
    margin-bottom: 24px;

    .item-title-container {
      border-bottom: 1px solid #e8e8e8;
      padding: 12px 0;
      margin: 0 16px;

      .box-title {
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
      }
    }

    .item-vehicle {
      .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .tab-icon {
          width: 24px;
          height: 24px;
          margin-bottom: 8px;
        }

        .tab-title {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.45);
          line-height: 20px;
        }

        .tab-value {
          font-size: 24px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
          line-height: 33px;
        }
      }
    }

    .item-person {
      .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        .tab-icon {
          width: 24px;
          height: 24px;
          margin-bottom: 8px;
        }

        .tab-title {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.45);
          line-height: 20px;
        }

        .tab-value {
          font-size: 24px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
          line-height: 33px;
        }
      }
    }

    .item-vehicle,
    .item-person {
      width: -webkit-fill-availabel;
      background: #f3f3f3;
      border-radius: 4px;
      height: 77px;
      background: #f3f3f3;
      border-radius: 4px;
      margin-left: 16px;
      margin-right: 16px;
      margin-top: 16px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 22px;
      img {
        width: 16px;
        height: 9px;
      }
      .fall {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #18be6b;
        line-height: 20px;
      }
      .upward {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #f33f3f;
        line-height: 20px;
      }
    }

    .tab-cotnainer {
      margin-top: 16px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: center;

      .tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 52px;

        .tab-value {
          font-size: 24px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #f33f3f;
          margin-bottom: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .tab-title {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.45);
          line-height: 20px;
          word-break: keep-all;
        }
      }
    }

    .video-container {
      width: 180px;
      height: 180px;
      margin: 16px auto;
    }

    .total-list {
      margin: 0 32px 20px 32px;
      .total-item {
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .circle {
          width: 12px;
          height: 12px;
          border-radius: 12px;
          background: #ffffff;
          margin-right: 12px;
        }
        .type-1 {
          border: 4px solid #2684ff;
        }
        .type-2 {
          border: 4px solid rgba(86, 180, 255, 1);
        }
        .type-3 {
          border: 4px solid rgba(38, 212, 152, 1);
        }
        .type-4 {
          border: 4px solid rgba(255, 195, 38, 1);
        }
        .type-5 {
          border: 4px solid rgba(255, 146, 90, 1);
        }
        .camera-name {
          flex: 1;
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.85);
        }
        .total-num {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.85);
        }
      }
    }
  }

  .top-box {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    bottom: 334px;
    display: flex;

    .left-box {
      width: 340px;
      overflow-y: auto;
      overflow-x: hidden;
      margin-right: 24px;
    }
    .flow-statistic {
      width: 340px;
      height: 253px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
      border-radius: 8px;
    }

    .doing {
      width: 340px;
      height: 136px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
      border-radius: 8px;
    }

    .real-time {
      width: 340px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
      border-radius: 8px;
      padding-bottom: 20px;
    }

    .state {
      width: 340px;
      height: 253px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
      border-radius: 8px;
    }
    .map-container {
      flex: 1;

      background: #ffffff;
      border-radius: 4px;
      position: relative;
      .time-range-cintainer {
        padding: 12px;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 252px;
        height: 80px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        .icon-group {
          flex: 1;
          display: block;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-bottom: 12px;
          .icon-image {
            margin-right: 12px;
            cursor: pointer;
          }
        }
        .slider-wrapper {
          height: 100%;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          cursor: pointer;
          .back-line {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: #e8e8e8;
            border-radius: 1px;
            display: flex;
            .inside-line-1 {
              height: 2px;
              background: #1890ff;
              border-radius: 1px;
            }
            .inside-line-24 {
              width: 0px;
            }
            .inside-line-36 {
              width: 120px;
            }
            .inside-line-72 {
              width: 100%;
            }
            .circle-button-36 {
              left: 120px !important;
            }
            .circle-button-72 {
              left: 240px !important;
            }
            .circle-button {
              position: absolute;
              top: -7px;
              left: 0;
              width: 14px;
              height: 14px;
              border-radius: 14px;
              background: #1890ff;
              box-shadow: 0px 1px 2px 0px rgba(24, 144, 255, 0.3);
              &::before {
                content: "";
                position: absolute;
                left: 3px;
                top: 3px;
                border-radius: 8px;
                background: #ffffff;
                width: 8px;
                height: 8px;
              }
            }
          }
          .time-24 {
            align-items: center;
            justify-content: flex-start;
          }
          .time-36 {
            align-items: center;
            justify-content: center;
          }
          .time-72 {
            align-items: center;
            justify-content: flex-end;
          }
          .time-24,
          .time-36,
          .time-72 {
            flex: 1;
            display: flex;
            font-size: 12px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            line-height: 17px;
          }
        }
      }
    }
  }

  .bottom-box {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    height: 284px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    display: flex;
    flex-direction: column;

    .statistical-graph {
      height: 253px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
      border-radius: 8px;
      padding: 16px;

      .statistical-header {
        display: flex;
        align-items: center;

        .statistical-title {
          font-size: 16px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
        }

        .indicate-line-1,
        .indicate-line-2 {
          display: inline-block;
          width: 12px;
          height: 3px;
        }

        .indicate-line-1 {
          margin: 0 8px 0 48px;
          background: #1890ff;
        }

        .indicate-line-2 {
          margin: 0 8px 0 24px;
          background: #99ccff;
        }

        .today-title,
        .yestoday-title {
          width: 60px;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
    }
  }
}
</style>